<template>
  <div class="product">
    <!-- 导航栏 -->
    <div class="navBar">
      <van-sticky>
        <van-nav-bar
          title="菜品分类"
          left-text="返回"
          left-arrow
          @click-left="goBack"
        />
      </van-sticky>
    </div>
    <!-- 产品内容展示区 -->
    <div class="productContent">
      <!-- 左侧侧边导航栏 -->
      <div class="categorySideBar">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            v-for="item in categoryData"
            :key="item.id"
            :title="item.name"
          />
        </van-sidebar>
      </div>
      <!-- 右侧产品展示区域 -->
      <div class="productList">
        <van-card
          v-for="item in productData"
          :key="item.id"
          num="2"
          :price="item.price"
          :desc="item.description"
          :title="item.name"
          :thumb="item.photo"
        >
          <template #footer>
            <!-- 步进器 -->
            <van-stepper v-model="num" />
          </template>
        </van-card>
      </div>
    </div>
    <!-- 底部提交订单按钮 -->
  </div>
</template>

<script>
// 导入辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      // 默认被选中的栏目的索引
      activeKey: 0,
      // 产品分类的id
      productCategoryId: "",
      // 步进器的值
      num: 0
    };
  },
  created() {
    // 将首页传递过来的activeKey的值赋值到当前页面中进行一个覆盖
    this.activeKey = this.$route.query.activeKey;
    // 将首页点击的产品分类的对应的id传递进来
    this.productCategoryId = this.$route.query.productCategoryId;
    // 调用Vuex中的获取产品分类的方法
    this.getCategoryDataVuex({
      page: 1,
      pageSize: 10,
    });
    // 根据分类获取产品数据
    this.getProductDataVuex({
      page:1,
      pageSize: 100,
      productCategoryId: this.productCategoryId
    })
  },
  methods: {
    ...mapActions("category", ["getCategoryDataVuex"]),
    ...mapActions("product", ["getProductDataVuex"]),
    // 侧边栏监听事件
    onChange(index){
      // index 当前点击的菜单栏的索引
      // 分类的数组
      console.log(this.categoryData[index].id);
      // 根据分类获取产品数据
      this.getProductDataVuex({
        page:1,
        pageSize: 100,
        productCategoryId: this.categoryData[index].id
      })
    },
    // 返回上一级页面
    goBack() {
      this.$router.go(-1);
    },
  },
  computed: {
    ...mapState("category", ["categoryData"]),
    ...mapState("product", ["productData"]),
  },
};
</script>

<style scoped>
/* 产品展示区域的样式 */
.productContent{
  display: flex;
  height: calc(100vh - 100px);
}
/* 左侧菜单样式 */
.categorySideBar{
  /* resize: horizontal;
  overflow: auto; */
}
/* 右侧产品区域样式 */
.productList{
  flex:1;
  overflow-y: auto;
}
/* 设置侧边导航栏的样式 */
.van-sidebar {
  width: 150px;
  text-align: center;
}
.van-sidebar-item {
  font-size: 16px;
}
</style>